<style>
    pre {
        min-height: 200px;
        margin: 20px auto;
        padding: 15px;
        font-size: 13px;
        word-wrap: normal;
        word-break: break-word !important;
        white-space: pre;
        overflow: auto;
        border-radius: 4px;
        color: #abb2bf;
        background: #282c34;
        line-height: 1.42857;
        border: 1px solid #ccc;
        font-family: Menlo, Monaco, Consolas, Courier New, monospace;
    }

    .fixed-submit {
        position: fixed;
        bottom: 15px;
        left: 25%;
    }

    .fixed-submit .btn {
        background-color: #007de6;
        color: #fff;
        border-color: #007de6;
        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .8);
    }

    .fixed-submit .btn:focus,
    .fixed-submit .btn:active:focus,
    .fixed-submit .btn.active:focus {
        outline: none;
        border-color: transparent;
        box-shadow:none;
    }
    
    .section-main {
        margin: 0 auto;
        padding: 15px 0;
        display: flex;
    }
    
    .division {
        flex: 1;
        width: 45%;
        margin: 0;
        padding-bottom: 50px;
    }
    
    .hljs {
        max-height: 50vh;
        display: block;
        overflow-x: auto;
        padding: .5em;
        color: #abb2bf;
        background: #282c34
    }
    
    .hljs-comment,
    .hljs-quote {
        color: #929292;
        font-style: normal
    }
    
    .hljs-doctag,
    .hljs-formula,
    .hljs-keyword {
        color: #c678dd
    }
    
    .hljs-deletion,
    .hljs-name,
    .hljs-section,
    .hljs-selector-tag,
    .hljs-subst {
        color: #e06c75
    }
    
    .hljs-literal {
        color: #56b6c2
    }
    
    .hljs-addition,
    .hljs-attribute,
    .hljs-meta-string,
    .hljs-regexp,
    .hljs-string {
        color: #98c379
    }
    
    .hljs-built_in,
    .hljs-class .hljs-title {
        color: #e6c07b
    }
    
    .hljs-attr,
    .hljs-number,
    .hljs-selector-attr,
    .hljs-selector-class,
    .hljs-selector-pseudo,
    .hljs-template-variable,
    .hljs-type,
    .hljs-variable {
        color: #d19a66
    }
    
    .hljs-bullet,
    .hljs-link,
    .hljs-meta,
    .hljs-selector-id,
    .hljs-symbol,
    .hljs-title {
        color: #61aeee
    }
    
    .hljs-emphasis {
        font-style: italic
    }
    
    .hljs-strong {
        font-weight: 700
    }
    
    .hljs-link {
        text-decoration: underline
    }
</style>
<div class="section-main">
  <div class="division">
      <div id="openapi-name-list">
          <table width="100%" cellspacing="0" cellpadding="0" border="0" class='tableform'>
              <tr>
                  <th>接口选择：</th>
                  <td>
                      <select id="apiName" name="apiName" onchange="selectDiv(this.value)">
                          <option value="0">--请选择接口</option>
                          <{foreach from=$list item=item}>
                              <option value="<{$item}>"><{$item}></option>
                          <{/foreach}>
                      </select>
                  </td>
              </tr>
          </table>
      </div>
      <div id="openapi-form-page">
      </div>
  </div>
  <div class="division">
      <h3>请求参数：</h3>
      <pre id="request" class="hljs"></pre>
      <h3>返回结果：</h3>
      <pre id="response" class="hljs"></pre>
  </div>
</div>
<script language="javascript" type="text/javascript">
function selectDiv(val){
    new Request.HTML({
        url:'index.php?app=openapi&ctl=admin_test&act=ajaxResult',
        method:'post',
        update:$('openapi-form-page'),
        data:{'apiName':val},
        onSuccess:function(){
            $('request').empty();
            $('response').empty();
        }
    }).send();
}
</script>